<template>
    <div id="nav">
        <el-scrollbar class="nav">
            <img class="nav-logo" src="@/assets/logo.png" />
            <!-- :class="[whichStep === 0 ? 'active' : '', 'process-box']" -->
            <button :class="[accountExpireInfoStatus === 3 ? 'btn-active' : '', 'btn']" @click="isBatchPay = true"
                :disabled="accountExpireInfoStatus === 3">批量发薪</button>
            <el-menu ref="menu" active-text-color="#1989FA" text-color="#202536" :default-active="defaultActive"
                :default-openeds="[defaultOpenIndex]" mode="vertical">
                <!--  -->
                <template v-for="(i, k) in menu" :key="k">
                    <el-menu-item @click="goRouter(i.path, i)" v-if="!i.children" :index="i.path">
                        <!-- <i :class="'nav-icon ' + i.meta.icon"></i> -->
                        <img class="icon-nav" :src="imgUrl(i.meta.icon)" alt="">
                        <span>{{ i.meta.title }}</span>
                    </el-menu-item>
                    <el-sub-menu v-else :index="i.path === '/' ? i.meta?.title : i.path">
                        <template #title>
                            <!-- <i :class="'nav-icon ' + i.meta.icon"></i> -->
                            <img class="icon-nav" :src="imgUrl(i.meta.icon)" alt="">
                            <span :class="{'active': i.meta?.icon?.includes('active')}">{{ i.meta.title }}</span>
                        </template>
                        <el-menu-item v-for="(item, index) in i.children" :key="index" :index="item.path"
                            @click="goRouter(item.path, i)">{{ item.meta.title }}</el-menu-item>
                    </el-sub-menu>
                </template>
            </el-menu>
        </el-scrollbar>
        <batchPay v-if="isBatchPay" @close="isBatchPay = false" isType="pay" />
    </div>
</template>

<script lang="ts" setup>
import { ElMenu } from 'element-plus'
import batchPay from './batch-pay.vue'
</script>
<script lang="ts">
import { defineComponent } from 'vue'
import { getMenu, UserMenuDto } from '@/api/base'
import user from '../utils/user'
import 'shepherd.js/dist/css/shepherd.css'
import { useShepherd } from 'vue-shepherd'
import { offset } from '@floating-ui/dom'
export default defineComponent({
    props: ['active', 'list'],
    data() {
        return {
            isBatchPay: false,
            menu: [] as UserMenuDto[],
            accountExpireInfoStatus: 0,
            tour: null as any,
            defaultOpenIndex: '0',
            defaultActive: user.isPcAdmin ? '/' : '/pay'
        }
    },
    computed: {
        imgUrl() {
            return (name: string) => {
                try {
                    return require(`@/assets/menu/${name}.png`)
                } catch (error) {
                    return ''
                }
            }
        }
    },
    async mounted() {
        const menu = await getMenu()
        this.menu = menu

        this.defaultActive = menu?.[0]?.children?.[0].path ?? '/'

        console.log(this.defaultActive, 'this.defaultActive')

        this.handleStart()
        // this.menu.push({
        //     "name": "",
        //     "path": "",
        //     "hidden": false,
        //     "redirect": "noRedirect",
        //     "component": "Layout",
        //     "alwaysShow": true,
        //     "meta": {
        //         "title": "预支",
        //         "icon": "el-icon-s-help",
        //         "noCache": false,
        //         "remark": ""
        //     },
        //     "children": [
        //         {
        //             "name": "AdvanceApplay",
        //             "path": "/advance/applay",
        //             "hidden": false,
        //             "component": "ParentView",
        //             "meta": {
        //                 "title": "预支申请单",
        //                 "icon": "el-icon-plus",
        //                 "noCache": false,
        //                 "remark": ""
        //             }
        //         },
        //         {
        //             "name": "AdvanceSetting",
        //             "path": "/advance/setting",
        //             "hidden": false,
        //             "component": "ParentView",
        //             "meta": {
        //                 "title": "预支设置",
        //                 "icon": "el-icon-plus",
        //                 "noCache": false,
        //                 "remark": ""
        //             }
        //         },
        //     ]
        // })
        user.waitLogin().then(() => {
            this.accountExpireInfoStatus = user.accountExpireInfoStatus
            console.log(this.accountExpireInfoStatus, user.accountExpireInfoStatus, '首页状态')
        })
    },
    methods: {
        async goRouter(path: string, ev: any) {
            this.menu.forEach(i => {
                if (i?.meta?.icon) {
                    i.meta.icon = i.meta.icon.replace(/-active$/, '')
                }
            })
            ev.meta.icon = ev.meta.icon.includes('active') ? ev.meta.icon : ev.meta.icon + '-active'
            console.log(path, 'goRoutergoRouter')
            // store.commit('setNavStatus', to.meta.isNav !== false)
            const res = await this.$router.push({
                path
            })
        },
        createStep() {
            let _this = this
            setTimeout(() => {
                this.tour = useShepherd({
                    useModalOverlay: true,
                    keyboardNavigation: true,
                    defaultStepOptions: {
                        // cancelIcon: {
                        //     enabled: true
                        // },
                        scrollTo: { behavior: 'smooth', block: 'center' },
                        // 高亮元素四周要填充的空白像素
                        modalOverlayOpeningPadding: 8,
                        // 空白像素的圆角
                        modalOverlayOpeningRadius: 4,
                        buttons: [{
                            action() {
                                return this.back()
                            },
                            text: '上一步'
                        }, {
                            action() {
                                return this.next()
                            },
                            text: '下一步'
                        }] as any
                    }
                })
                const lists = Array.from(document.querySelectorAll('.el-scrollbar__view>.el-menu>li'))
                console.log(11111, lists)
                const cur = lists.findIndex((i: any) => {
                    return i.innerHTML.includes('预支管理')
                })
                console.log(22222, cur)
                this.tour.addStep({
                    attachTo: { element: lists[cur], on: 'right' },
                    text: '"预支工资"已经开放使用，快来体验吧~',
                    classes: 'example-step-extra-class',
                    floatingUIOptions: {
                        middleware: [offset({ mainAxis: 30, crossAxis: 12 })]
                    },
                    buttons: [
                        {
                            text: '跳过',
                            classes: 'shepherd-btn1',
                            action() {
                                _this.handleFinish()
                                return this.complete()
                            }
                        },
                        {
                            text: '下一步1/6',
                            classes: 'shepherd-btn2',
                            action() {
                                const index = _this.menu.findIndex((i: any) => {
                                    return i.meta.title === '预支管理'
                                })
                                if (index !== -1) {
                                    console.log((_this as any).$refs)
                                    ; (_this as any).$router.push('/advance/setting')
                                        ; (_this as any).$refs.menu.open(index)
                                }
                                return this.next()
                            }
                        }
                    ] as any
                })
                const lists2 = Array.from(document.querySelectorAll('.el-menu-item'))
                const cur2 = lists2.findIndex((i: any) => {
                    return i.innerHTML.includes('预支配置')
                })
                this.tour.addStep({
                    attachTo: { element: lists2[cur2], on: 'right' },
                    text: '进入页面，设置预支规则和配置企业',
                    classes: 'example-step-extra-class',
                    floatingUIOptions: {
                        middleware: [offset({ mainAxis: 30, crossAxis: 12 })]
                    },
                    buttons: [
                        {
                            text: '跳过',
                            classes: 'shepherd-btn1',
                            action() {
                                _this.handleFinish()
                                return this.complete()
                            }
                        },
                        {
                            text: '下一步2/6',
                            classes: 'shepherd-btn2',
                            action() {
                                return this.next()
                            }
                        }
                    ] as any
                })
                this.tour.addStep({
                    attachTo: {
 element: function() {
                        return document.querySelector('#advanceRule')
                    },
on: 'bottom'
},
                    text: '在这里设置预支规则',
                    classes: 'example-step-extra-class',
                    beforeShowPromise: () => {
                        new Promise((resolve: any) => {
                            resolve(document.querySelector('#advanceRule'))
                        })
                    },
                    floatingUIOptions: {
                        middleware: [offset({ mainAxis: 30, crossAxis: 12 })]
                    },
                    buttons: [
                        {
                            text: '跳过',
                            classes: 'shepherd-btn1',
                            action() {
                                _this.handleFinish()
                                return this.complete()
                            }
                        },
                        {
                            text: '下一步3/6',
                            classes: 'shepherd-btn2',
                            action() {
                                return this.next()
                            }
                        }
                    ] as any
                })

                this.tour.addStep({
                    attachTo: {
 element: function() {
                        return document.querySelector('#setCompany')
                    },
on: 'bottom'
},
                    text: '在这里配置预支企业，在预支列表中的企业，工人可申请预支',
                    classes: 'example-step-extra-class',
                    floatingUIOptions: {
                        middleware: [offset({ mainAxis: 30, crossAxis: 12 })]
                    },
                    buttons: [
                        {
                            text: '跳过',
                            classes: 'shepherd-btn1',
                            action() {
                                _this.handleFinish()
                                return this.complete()
                            }
                        },
                        {
                            text: '下一步4/6',
                            classes: 'shepherd-btn2',
                            action() {
                                const index = _this.menu.findIndex((i: any) => {
                                    return i.meta.title === '财务对账'
                                })
                                if (index !== -1) {
                                    console.log((_this as any).$refs)
                                    ; (_this as any).$router.push('/bill')
                                        ; (_this as any).$refs.menu.open(index)
                                }
                                return this.next()
                            }
                        }
                    ] as any
                })

                const cur3 = lists.findIndex((i: any) => {
                    return i.innerHTML.includes('财务对账')
                })

                this.tour.addStep({
                    attachTo: { element: lists[cur3], on: 'right' },
                    text: '"对账功能" 移动到这里了',
                    classes: 'example-step-extra-class',
                    floatingUIOptions: {
                        middleware: [offset({ mainAxis: 30, crossAxis: 12 })]
                    },
                    buttons: [
                        {
                            text: '跳过',
                            classes: 'shepherd-btn1',
                            action() {
                                _this.handleFinish()
                                return this.complete()
                            }
                        },
                        {
                            text: '下一步5/6',
                            classes: 'shepherd-btn2',
                            action() {
                                return this.next()
                            }
                        }
                    ] as any
                })

                this.tour.addStep({
                    attachTo: {
 element: function() {
                        return document.querySelector('#goCheck')
                    },
on: 'bottom'
},
                    text: '导入员工这个月的薪资标准，系统自动帮你进行核算。 ',
                    classes: 'example-step-extra-class',
                    floatingUIOptions: {
                        middleware: [offset({ mainAxis: 30, crossAxis: 12 })]
                    },
                    buttons: [
                        {
                            text: '跳过',
                            classes: 'shepherd-btn1',
                            action() {
                                _this.handleFinish()
                                return this.complete()
                            }
                        },
                        {
                            text: '结束6/6',
                            classes: 'shepherd-btn2',
                            action() {
                                _this.handleFinish()
                                return this.complete()
                            }
                        }
                    ] as any
                })

                this.tour.start()
            }, 100)
        },
        handleStart() {
            // 如果没有完成指导开始做指导操作
            if (!localStorage.getItem('guide-advance-finish')) {
                this.createStep()
            }
        },
        handleFinish() {
            this.$router.push('/')
            localStorage.setItem('guide-advance-finish', 'true')
        }
    }
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
.btn
    width 240px
    margin 20px auto
    display block
.btn-active
    background #ccc
.nav,#nav
    width 256px
    height 100vh
    background-color white
.nav
    overflow auto
.nav-logo
    margin 38px 33px 20px
#nav
    border-right none
    width 258px
    font-size 14px
.el-menu
    border-right none
.nav-icon
    display inline-block
    margin-right 20px
    font-size 24px
.icon-nav
    width 24px
    height 24px
    margin-right 20px
.el-menu-item.is-active
    font-weight bold
.active
    color #1989FA !important
:deep().el-sub-menu .el-menu-item
    color #9497B1 !important
:deep().el-sub-menu .el-menu-item.is-active
    color #1989FA !important
</style>
<style>
.shepherd-content {
    background: #1989FA;
}

.shepherd-text {
    color: #fff;
}

.shepherd-btn1 {
    border: 1px solid #fff;
    background: #1989FA;
    color: #fff;
}

.shepherd-btn2 {
    border: 1px solid #1989FA;
    background: #fff;
    color: #1989FA;
}

.shepherd-arrow:before {
    background-color: #1989FA;
}
.fc-black {
    color: #202536;
}
</style>
